<template>
  <view class="containner">
    <u-navbar
      height="50"
      title="我要申请"
      title-size="36"
      back-icon-color="#333"
      title-color="#333"
    ></u-navbar>
    <view class="from">
      <u-cell-group>
        <u-cell-item title="客户姓名" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.customerName"
                placeholder="请输入客户姓名"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>

        <u-cell-item title="联系方式" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.customerMobile"
                placeholder="请输入联系方式"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>

        <view class="view-item" @click="show = true">
          <view class="title"> 客户地址 </view>
          <view class="info" v-if="adress">
            {{ adress.province.label + '-' + '-' + adress.city.label + '-' + adress.area.label }}
          </view>
          <view v-else class="info"> 选择 </view>
          <u-icon style="margin-left: 10rpx" name="/static/img/more.png" size="15"></u-icon>
        </view>
        <u-cell-item title="详细地址" :arrow="false">
          <view style="display: flex; justify-content: flex-end">
            <view style="width: 50%" class="text_right">
              <input
                v-model="form.detailAddress"
                placeholder="请输入详细地址"
                :clearable="false"
                :inputBorder="false"
              />
            </view>
          </view>
        </u-cell-item>
      </u-cell-group>
      <view class="view-item" style="margin: 20rpx 0">
        <view> 申请原因 </view>
        <view class="">
          <textarea
            v-model="form.applyReason"
            style="margin-left: 20rpx; width: 500rpx; height: 120rpx"
            placeholder="请简述申请原因"
            name=""
            id=""
            cols="30"
            rows="10"
          ></textarea>
        </view>
      </view>
      <view class="info-view">
        <view style=""> 相关证明 </view>
        <u-upload ref="uUpload" :action="uploadURL"></u-upload>
      </view>
    </view>

    <view class="submit_the_module">
      <view @click="submit">确认提交</view>
    </view>
    <u-picker mode="region" v-model="show" @confirm="confirm" range-key="label"></u-picker>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import { BASE_URL, UP_URL } from '@/common/config.js'

export default {
  data() {
    return {
      show: false,
      Ranges: [],
      adress: '',
      typeEleven: '',
      order_id: '',
      uploadURL: BASE_URL + UP_URL,
      form: {
        customerName: '',
        customerMobile: '',
        areaId: '',
        detailAddress: '',
        applyReason: '',
        applyPicUrls: []
      }
    }
  },
  onLoad(e) {
    this.form.id = e.id ? e.id : ''
    if (e.id) {
      this.$u.get('/app-api/trade/brokerage-achievement/get?id=' + e.id).then((res) => {
        this.form = res.data
      })
    }
    // this.$u.api.getTypeRefund().then(res=>{
    // 	this.Ranges = res.data
    // })
  },
  onShow() {},
  onReady() {},
  methods: {
    selectAFunction(value) {
      this.show = true
    },
    confirm(e) {
      this.adress = e
      this.form.areaId = e.area.value
    },
    submit() {
      this.$refs.uUpload.lists.forEach((val) => {
        if (val.response) {
          this.form.applyPicUrls.push(val.response.data)
        } else {
          this.form.applyPicUrls.push(val.url)
        }
      })

      if (this.form.applyPicUrls.length <= 0) {
        this.$refs.uToast.show({
          title: '证明图片不能为空'
        })
        return
      }

      if (!this.form.customerName) {
        this.$refs.uToast.show({
          title: '客户名称不能为空'
        })
        return
      }
      if (!this.form.customerMobile) {
        this.$refs.uToast.show({
          title: '客户联系方式不能为空'
        })
        return
      }

      if (!this.form.applyReason) {
        this.$refs.uToast.show({
          title: '申请原因不能为空'
        })
        return
      }

      if (this.form.id) {
        this.$u.post('/app-api/trade/brokerage-achievement/create').then((res) => {
          this.$refs.uToast.show({
            title: '提交申请'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        })
        return
      }
      this.$u.post('/app-api/trade/brokerage-achievement/create', this.form).then((res) => {
        this.$refs.uToast.show({
          title: '提交申请'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.submit_the_module {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  margin-top: 380rpx;
  view {
    width: 96%;
    border-radius: 40rpx;
    padding: 20rpx 0rpx;
    background-color: #0f76bc;
    color: #f1f1f1;
    font-size: 30rpx;
    text-align: center;
  }
}

.from {
  padding: 20rpx;
}

.info-view {
  background-color: #fff;
  font-size: 28rpx;
  color: #606266;
  padding: 28rpx;
}
.containner {
  background-color: #f6f8f9;
  min-height: 100vh;
}
.tips {
  background-color: #f1f6ff;
  padding: 10upx 20upx;
  font-size: 22upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #4286f4;
  line-height: 32upx;
}
.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;

  .agreement-text {
    display: flex;
    padding-left: 8rpx;
    color: $u-tips-color;
    text {
      color: #2d93fd;
    }
  }
}

.item-view {
  padding: 20rpx;
  font-size: 30rpx;
  background-color: #fff;
}

.view-item {
  display: flex;
  border-bottom: #ededed solid 2rpx;
  padding: 30rpx;
  background-color: #fff;
  color: #606266;
}
.title {
  flex: 1;
}
.view-item2 {
  padding: 20rpx;
  line-height: 55rpx;
}
</style>
